<template>
    
    <div>
        <div class="content">

            <div class="minTitle">
                <div class="flag"></div>
                <div class="text">拟参评不符合人员列表</div>
                <div class="close" @click="$router.go(-1)"><i class="el-icon-close"></i></div>
            </div>

            <!-- 查询条件，默认在页面加载后，组件会触发一次queryHandle事件 -->
            <commonQuery :formQuery="formQuery" @queryHandle="queryCick"  :allowAllFieldList="['categoryType']"></commonQuery>

            <div class="content-table">
                <el-table
                        :data="tableData"
                        border
                        size="small"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="拟参评职称等级"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if='scope.row.academicType == "100"'>续任初职</span>
                                <span v-else-if='scope.row.academicType == "101"'>初职晋中职</span>
                                <span v-else-if='scope.row.academicType == "110"'>续任中职</span>
                                <span v-else-if='scope.row.academicType == "111"'>中职晋副高</span>
                                <span v-else-if='scope.row.academicType == "120"'>续任副高</span>
                                <span v-else-if='scope.row.academicType == "121"'>副高晋正高</span>
                                <span v-else-if='scope.row.academicType == "130"'>续任正高</span>
                                <span v-else-if='scope.row.academicType == "200"'>未知类型</span>
                            </template>
                          
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="领域"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="categoryChildName"
                            label="岗位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="hasAcross"
                            label="是否符合"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.firstCheckStatus==1">是</span>
                                <span v-else>否</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            label="详情"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click.stop="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        @current-change="pageClick"
                        :total="total"
                        :current-page="pageNum"
                        :page-size="pageSize"
                        >
                </el-pagination>
            </div>
        </div>

        <!-- 不符合详情 -->
        <nonconformingPersonDetail ref="nonconformingPersonDetail" :userName="userName" :recordId="recordId"></nonconformingPersonDetail>


    </div>
</template>

<script>
    import commonQuery from "./CommonQuery";
    import nonconformingPersonDetail from "./NonconformingPersonDetail";
    import {qaStandardRecordFindDetails,participationPeopleListPost } from '@/service/api'
    import { infoProcessing } from '../../service/personalInfoDataProcessing'
    import Qs from 'qs'
    export default {
        name: "personnelInfo",
        data() {
            return {
                titlesTypeOptions:[],       // 职称名称列表
                academicTypeOptions:[],     // 拟参评职称等级列表
                categoryTypeListOptions:[], // 岗位列表

                formQuery:"",
                tableData:[],
                pageNum:1,
                pageSize:12,
                total: 0,

                userName:"",
                recordId:"",
                allFieldList:[],
            }
        },
        components:{
            commonQuery,
            nonconformingPersonDetail
        },
        created(){
            // 如果路由参数为空，则直接返回
            if(JSON.stringify(this.$route.params) == "{}"){
                this.$router.go(-1);
                return;
            }

            this.formQuery = this.$route.params;
        },
        methods:{
            queryCick(queryObj){
                this.pageNum = 1;
                this.loadData(queryObj);
            },
            loadData(queryObj){
                queryObj.pageNum = this.pageNum;
                queryObj.pageSize = this.pageSize;
                queryObj.hasPass = false;  // 是否符合条件： true 符合，false 不符合 null 全部

                this.formQuery = JSON.parse(JSON.stringify(queryObj));

                participationPeopleListPost(Qs.stringify(queryObj)).then(res => {
                    if(res.code == 200){
                        this.tableData = res.data.data;
                        
                        this.pageNum = res.data.pageNum;
                        this.pageSize = res.data.pageSize;
                        this.total = res.data.total;
                    }
                });
            },
            // 数据列表 - 翻页
            pageClick(e) {
                this.pageNum = e;
                this.loadData(this.formQuery);
            },

            // 点击用户详情
            handleClick(e) {
                this.userName = e.userName;
                this.recordId = e.id;
                this.$refs.nonconformingPersonDetail.$el.style.display = "flex";
            },
           
        }
    }
</script>

<style scoped>

 .content{
    min-height: 520px;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    padding:31px 38px;
}

.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 14px 0px;
    border-top: solid 1px #f3f3f3;
    position:relative;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;

}

.close{
    position: absolute;
    right: 0px;
    padding: 0px 18px;
    cursor: pointer;
}
.close>i{
    font-size: 28px;
    font-weight: bold;
}



    .content-table {
        min-height: 410px;
        margin-top: 14px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }

    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }

    .content-table >>> tbody tr:nth-child(even) td {
        background: #F5F8FE;
    }

    .content-table >>> tbody .el-button {
        padding: 5px 15px;
    }
    .pagination{
        margin-top: 10px;
        text-align: end;
        padding-right: 16px;
    }
    .moduleName{
        background: #31478F;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        padding: 11px 0px;
        text-align: center;
        color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .warp >>> .el-table--small,
    .warp >>> .el-button--small{
        font-size: 13px;
    }
</style>
